<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>sentox-TreeGrid</title>
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/font-awesome.min.css">

		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	</head>

	<body style="margin:10px;">
		<h2>Reports using TreeGrid</h2>
		<p>Using TreeGrid to show complex reports.</p>
		<div style="margin:20px 0;"></div>
		<table title="Reports using TreeGrid" class="easyui-treegrid" style="width:800px;height:400px"
				data-options="
					url: '../json/treegrid_data3.json',
					method: 'get',
					rownumbers: true,
					showFooter: true,
					idField: 'id',
					treeField: 'region'
				">
			<thead frozen="true">
				<tr>
					<th field="region" width="200">Region</th>
				</tr>
			</thead>
			<thead>
				<tr>
					<th colspan="4">2009</th>
					<th colspan="4">2010</th>
				</tr>
				<tr>
					<th field="f1" width="60" align="right">1st qrt.</th>
					<th field="f2" width="60" align="right">2st qrt.</th>
					<th field="f3" width="60" align="right">3st qrt.</th>
					<th field="f4" width="60" align="right">4st qrt.</th>
					<th field="f5" width="60" align="right">1st qrt.</th>
					<th field="f6" width="60" align="right">2st qrt.</th>
					<th field="f7" width="60" align="right">3st qrt.</th>
					<th field="f8" width="60" align="right">4st qrt.</th>
				</tr>
			</thead>
		</table>
		
		
		
		<h2>TreeGrid ContextMenu</h2>
		<p>Right click to display the context menu.</p>
		<div style="margin:20px 0;"></div>
		<table id="tg" class="easyui-treegrid" title="TreeGrid ContextMenu" style="width:800px;height:400px"
				data-options="
					iconCls: 'icon-ok',
					rownumbers: true,
					animate: true,
					collapsible: true,
					fitColumns: true,
					url: '../json/treegrid_data2.json',
					method: 'get',
					idField: 'id',
					treeField: 'name',
					onContextMenu: onContextMenu
				">
			<thead>
				<tr>
					<th data-options="field:'name',width:180">Task Name</th>
					<th data-options="field:'persons',width:60,align:'right'">Persons</th>
					<th data-options="field:'begin',width:80">Begin Date</th>
					<th data-options="field:'end',width:80">End Date</th>
					<th data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
				</tr>
			</thead>
		</table>
		<div id="mm" class="easyui-menu" style="width:120px;">
			<div onclick="append()" data-options="iconCls:'fa fa-plus'">Append</div>
			<div onclick="removeit()" data-options="iconCls:'fa fa-minus'">Remove</div>
			<div class="menu-sep"></div>
			<div onclick="expand()">Expand</div>
			<div onclick="collapse()">Collapse</div>
		</div>
		<script type="text/javascript">
			function formatProgress(value){
		    	if (value){
			    	var s = '<div style="width:100%;border:1px solid #ccc">' +
			    			'<div style="width:' + value + '%;background:#3f5fff;color:#fff">' + value + '%' + '</div>'
			    			'</div>';
			    	return s;
		    	} else {
			    	return '';
		    	}
			}
			function onContextMenu(e,row){
				e.preventDefault();
				$(this).treegrid('select', row.id);
				$('#mm').menu('show',{
					left: e.pageX,
					top: e.pageY
				});
			}
			var idIndex = 100;
			function append(){
				idIndex++;
				var d1 = new Date();
				var d2 = new Date();
				d2.setMonth(d2.getMonth()+1);
				var node = $('#tg').treegrid('getSelected');
				$('#tg').treegrid('append',{
					parent: node.id,
					data: [{
						id: idIndex,
						name: 'New Task'+idIndex,
						persons: parseInt(Math.random()*10),
						begin: $.fn.datebox.defaults.formatter(d1),
						end: $.fn.datebox.defaults.formatter(d2),
						progress: parseInt(Math.random()*100)
					}]
				})
			}
			function removeIt(){
				var node = $('#tg').treegrid('getSelected');
				if (node){
					$('#tg').treegrid('remove', node.id);
				}
			}
			function collapse(){
				var node = $('#tg').treegrid('getSelected');
				if (node){
					$('#tg').treegrid('collapse', node.id);
				}
			}
			function expand(){
				var node = $('#tg').treegrid('getSelected');
				if (node){
					$('#tg').treegrid('expand', node.id);
				}
			}
		</script>
		
		
	</body>

</html>